<template>
  <div id="SuppleBar">
    <!-- <img src="@/assets/xingya.png" width="50" /> -->
    <div v-show="!hide" class="supple-content">
        <div v-show="index == 0">show</div>
        <div v-show="index == 1">good</div>
        <div v-show="index == 2">nobad</div>
        <div v-show="index == 3">also</div>
        <div v-show="index == 4">haha</div>
    </div>
    <func-vbar v-on:setIndex="setIndex" :bars="bars" :hide="hide"></func-vbar>
  </div>
</template>

<script>
import FuncVbar from "@/components/global/component/FuncVbar.vue"
export default {
  data() {
    return {
      index:0,
      bars:[
        // {"icon":"mdi-xml", "color":"yellow", "notify": true, "info": "代码"},
        // {"icon":"mdi-ticket", "color":"red", "notify": false, "info": "笔记属性"},
        // {"icon":"mdi-label", "color":"green", "notify": false, "info": "标签"},
        // {"icon":"mdi-cards", "color":"orange", "notify": false, "info": "卡片"},
        // {"icon":"mdi-relation-many-to-one", "color":"blue", "notify": false, "info": "关联图"},
      ],
      hide: true
    }
  },
  components: { FuncVbar },
  methods:{
    setIndex(index) {
      if(this.index == index ) this.hide = !this.hide
      else { this.hide = false }
      this.index = index; 
    }
  }
}

</script>
<style lang="scss" scoped>
#SuppleBar {
  flex-grow:0;
  position:relative;
  // height: 100vh;
  .supple-content{
    width: 200px;
    height:100%;
    box-sizing:border-box;
    background: #fafafa;
  }
}

</style>